<template>
  <div id="userInfo">
    <el-divider content-position="left"><strong><ins>{{user_info_title}}</ins></strong></el-divider>
    <div class="userInfo_box">
      <div class="box_left">
        <img :src="user_info_img" @click="changeImg">
        <div style="color: #53a8ff">[点击修改头像]</div>
      </div>
      <div class="box_right">
        <el-form ref="form" :model="user_info_form" label-width="80px">
          <el-form-item label="用户昵称" >
            <el-input v-model="user_info_form.uName" :disabled="!modify_mode"></el-input>
          </el-form-item>
          <el-form-item label="用户性别" >
            <el-select v-model="user_info_form.uSex" placeholder="请选择性别" :disabled="!modify_mode" style="width: 100%">
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
<!--            <el-radio-group v-model="user_info_form.uSex" :disabled="!modify_mode">-->
<!--              <el-radio label="男生" value="0"></el-radio>-->
<!--              <el-radio label="女生" value="1"></el-radio>-->
<!--            </el-radio-group>-->
          </el-form-item>
          <el-form-item label="用户年龄">
            <el-input v-model="user_info_form.uAge" :disabled="!modify_mode"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="user_info_form.uPhone" :disabled="!modify_mode"></el-input>
          </el-form-item>
          <el-form-item label="出生日期">
            <el-input v-model="user_info_form.uBirthDate" :disabled="!modify_mode"></el-input>
          </el-form-item>
          <el-form-item style="margin-top: 20px">
            <el-button type="primary" @click="modify_mode = !modify_mode" v-if="modify_mode === false">修改参数</el-button>
            <el-button type="primary" @click="onSubmit" v-if="modify_mode === true">确认修改</el-button>
            <el-button v-if="modify_mode === true" @click="cancelBtn">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserInfo',
  data () {
    return {
      user_info_title: '用户信息', // 设置标题
      user_info_form: {
        u_id: null, // 设置用户id
        uName: null, // 设置用户的名称
        uSex: null, // 设置用户的性别
        uPhone: null, // 设置联系方式
        uAge: null, // 设置用户的年龄
        uBirthDate: null, // 用户的出生日期
        uState: null, // 设置用户的状态
        uCreateTime: null // 设置用户的创建时间
      }, // 存储用户信息的对象
      modify_mode: false, // 设置是否为修改模式
      user_info_img: require('@/assets/img/logo.jpg') // 用户头像[暂时]
    }
  },
  methods: {
    // 点击修改提交按钮
    onSubmit () {
      console.log('submit!', this.user_info_form)
      this.modify_mode = !this.modify_mode
      this.$axios.get('/user/updateInfo', {
        params: {
          u_id: this.user_info_form.u_id,
          uName: this.user_info_form.uName,
          uSex: this.user_info_form.uSex,
          uAge: this.user_info_form.uAge,
          uBirthDate: this.user_info_form.uBirthDate,
          uPhone: this.user_info_form.uPhone,
          uState: this.user_info_form.uState,
          uCreateTime: this.user_info_form.uCreateTime,
          account: this.$store.state.vuex_user_Info.account,
          password: this.$store.state.vuex_user_Info.password
        }
      }).then(response => {
        if (response.data.message === '修改成功') {
          this.$store.state.vuex_user_Info = response.data.data
          this.$message({
            message: response.data.message,
            type: 'success'
          })
        }
      }).catch(err => {
        console.log(err)
      })
    },
    // 修改图片按钮
    changeImg () {
      console.log('点击了修改图片')
    },
    // 修改中用户存储数据的对象
    changeUserInfoForm (obj, obj2) {
      obj.u_id = obj2.u_id
      obj.uName = obj2.uName
      obj.uSex = obj2.uSex + ''
      obj.uPhone = obj2.uPhone
      obj.uAge = obj2.uAge
      obj.uBirthDate = obj2.uBirthDate
      obj.uState = obj2.uState
      obj.uCreateTime = obj2.uCreateTime
    },
    // 取消编辑按钮
    cancelBtn () {
      this.$confirm('是否取消修改个人信息?', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '取消编辑'
        })
        this.modify_mode = false
      }).catch(() => {
      })
    }
  },
  mounted () {
    // 加载数据
    this.changeUserInfoForm(this.user_info_form, this.$store.state.vuex_user_Info)
  }
}
</script>

<style lang="less" scoped>
#userInfo {
  width: 100%;
  /*background: red;*/
  .userInfo_box{
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 10px 20px;
    .box_left{
      width: 30%;
      /*background: red;*/
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      img{
        width: 80%;
      }
    }
    .box_right{
      border-left: 1px solid gainsboro;
      width: 70%;
      /*background: blue;*/
      box-sizing: border-box;
      padding: 20px 30px;
    }
  }
}
</style>
